<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view :class="['page', data.__page_classes]">
            <view class="body after-navber w-100 h-100">
                <view style="height:566upx;position:relative;z-index:10">
                    <image :src="data.__wxapp_img.register.head.url" style="width:100%;height:566upx;position:absolute;z-index:0;top:0;left:0"></image>
                    <view class="calendarSignDay" style="position:relative;" v-if="data.status==1">
                        <view class="lianxu">已连续签到</view>
                        <view class="tianshu">
                            <text style="font-size:40px;font-weight:bolder;color:#ffde00;">{{data.continuation}}</text>天</view>
                    </view>
                    <image @tap="calendarSign" class="registre-img" :src="data.__wxapp_img.register.sign_in.url" style="position:relative;" v-else></image>
                    <view class="rntegral-font" style="font-size:15px;position:relative">
                        <text>今</text>日签到获得
                        <text style="font-weight:bolder;color:#ffde00;">{{data.register.register_integral}}</text>积分</view>
                    <view class="rntegral-font" style="font-size:13px;position:relative">连续签到{{data.register.register_continuation}}天有惊喜哦</view>
                    <view @tap="register_rule" class="register-rule">规则</view>
                </view>
                <view class="content">
                    <view class="register">
											<calendar v-bind="{data:data}" @doDay="doDay" @selectDay="selectDay"></calendar>
                    </view>
                </view>
                <view @tap="hideModal" catchtouchmove="preventTouchMove" id="modal-mask" v-if="data.register_rule"></view>
                <block v-if="data.register_rule">
                    <block v-if="data.status_show==1">
                        <view class="register_success" v-if="data.jiangli==1">
                            <image :src="data.__wxapp_img.dapp.jiangli.url" style="width:100%;height:100%;"></image>
                            <view class="register_bac">
                                <view class="register_font">连续签到
                                        <text style="color:red;">{{data.continuation}}</text>天</view>
                                <view class="register_font">今日获得
                                        <text style="color:red;">{{data.register.register_integral}}</text>+
                                        <text style="color:red;">{{data.register.register_reward}}</text>积分</view>
                                <view @tap="hideModal" class="zhidaolo">
                                    <view>知道咯</view>
                                </view>
                            </view>
                        </view>
                        <view class="register_success" v-else>
                            <image :src="data.__wxapp_img.integralMall.register.register_bg.url" style="width:100%;height:100%;"></image>
                            <view class="register_bac">
                                <view class="register_font">连续签到
                                        <text style="color:red;">{{data.continuation}}</text>天</view>
                                <view class="register_font">今日获得
                                        <text style="color:red;">{{data.register.register_integral}}</text>积分</view>
                                <view @tap="hideModal" class="zhidaolo">
                                    <view>知道咯</view>
                                </view>
                            </view>
                        </view>
                    </block>
                    <view class="register_rule" v-else>
                        <image @tap="hideModal" class="close" :src="data.__wxapp_img.register.close.url"></image>
                        <view class="rule">签到规则</view>
                        <view class="rule-detail" v-for="(item,index) in data.register.register_rule" v-key="item.id">{{item}}</view>
                    </view>
                </block>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	import calendar from '../../../components/calendar/calendar.vue'
	export default {
		components:{calendar},
		data() {
			return {
				data: {
        currentDate: "",
        dayList: "",
        currentDayList: "",
        currentObj: "",
        currentDay: "",
        selectCSS: "bk-color-day",
        weeks: [ {
            day: "日"
        }, {
            day: "一"
        }, {
            day: "二"
        }, {
            day: "三"
        }, {
            day: "四"
        }, {
            day: "五"
        }, {
            day: "六"
        } ]
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this.getCurrentDayString();
        this.setData({
            currentDate: e.getFullYear() + "年" + (e.getMonth() + 1) + "月",
            today: e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate(),
            yearmonth: e.getFullYear() + "/" + (e.getMonth() + 1) + "/",
            today_time: e.getFullYear() + "" + (e.getMonth() + 1) + e.getDate(),
            currentDay: e.getDate(),
            currentObj: e,
            currentYear: e.getFullYear(),
            currentMonth: e.getMonth() + 1
        }), this.setSchedule(e);
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
        var e = this;
        myVue.getApp.request({
            url: myVue.getApp.api.integral.explain,
            data: {
                today: e.data.today
            },
            success: function(t) {
                if (0 == t.code) {
                    if (t.data.register) a = t.data.register.continuation; else var a = 0;
                    e.setData({
                        register: t.data.setting,
                        continuation: a,
                        registerTime: t.data.registerTime
                    }), t.data.today && e.setData({
                        status: 1
                    });
                    var r = e.getApp.core.getStorageSync(e.getApp.const.CURRENT_DAY_LIST), n = [];
                    for (var i in r) n.push(e.data.yearmonth + r[i]);
                    var o = function(t, e) {
                        for (var a = 0, r = 0, n = new Array(); a < t.length && r < e.length; ) {
                            var i = new Date(t[a]).getTime(), o = new Date(e[r]).getTime();
                            i < o || isNaN(i) ? a++ : i > o ? r++ : (n.push(e[r]), a++, r++);
                        }
                        return n;
                    }(n, t.data.registerTime), s = [];
                    for (var i in r) r[i] && (r[i] = {
                        date: r[i],
                        is_re: 0
                    });
                    for (var i in o) {
                        s = o[i].split("/");
                        for (var i in r) r[i] && r[i].date == s[2] && (r[i].is_re = 1);
                    }
                    e.setData({
                        currentDayList: r
                    });
                }
            }
        });
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			doDay: function(t) {
        var e = this, a = e.data.currentObj, r = a.getFullYear(), n = a.getMonth() + 1, i = a.getDate(), o = "";
        o = "left" == t.currentTarget.dataset.key ? (n -= 1) <= 0 ? r - 1 + "/12/" + i : r + "/" + n + "/" + i : (n += 1) <= 12 ? r + "/" + n + "/" + i : r + 1 + "/1/" + i, 
        a = new Date(o), this.setData({
            currentDate: a.getFullYear() + "年" + (a.getMonth() + 1) + "月",
            currentObj: a,
            currentYear: a.getFullYear(),
            currentMonth: a.getMonth() + 1
        });
        var s = a.getFullYear() + "/" + (a.getMonth() + 1) + "/";
        this.setSchedule(a);
        var g = myVue.getApp.core.getStorageSync(myVue.getApp.const.CURRENT_DAY_LIST);
        for (var u in g) ;
        var c = [], d = e.data.registerTime;
        for (var u in g) g[u] && c.push(s + g[u]);
        var h = function(t, e) {
            for (var a = 0, r = 0, n = new Array(); a < t.length && r < e.length; ) {
                var i = new Date(t[a]).getTime(), o = new Date(e[r]).getTime();
                i < o ? a++ : i > o ? r++ : (n.push(e[r]), a++, r++);
            }
            return n;
        }(c, d), p = [];
        for (var u in g) g[u] && (g[u] = {
            date: g[u],
            is_re: 0
        });
        for (var u in h) {
            p = h[u].split("/");
            for (var u in g) g[u] && g[u].date == p[2] && (g[u].is_re = 1);
        }
        e.setData({
            currentDayList: g
        });
    },
    setSchedule: function(t) {
        for (var e = t.getMonth() + 1, a = t.getFullYear(), r = t.getDate(), n = (t.getDate(), 
        new Date(a, e, 0).getDate()), i = t.getUTCDay() + 1 - (r % 7 - 1), o = i <= 0 ? 7 + i : i, s = [], g = 0, u = 0; u < 42; u++) {
            u < o ? s[u] = "" : g < n ? (s[u] = g + 1, g = s[u]) : g >= n && (s[u] = "");
        }
        myVue.getApp.core.setStorageSync(myVue.getApp.const.CURRENT_DAY_LIST, s);
    },
    selectDay: function(t) {
        var e = this;
        e.setData({
            currentDay: t.target.dataset.day,
            currentDa: t.target.dataset.day,
            currentDate: e.data.currentYear + "年" + e.data.currentMonth + "月",
            checkDay: e.data.currentYear + "" + e.data.currentMonth + t.target.dataset.day
        });
    },
		getCurrentDayString: function() {
        var t = this.data.currentObj;
        if ("" != t) return t;
        var e = new Date(), a = e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();
        return new Date(a);
    },
		register_rule: function() {
        this.setData({
            register_rule: !0,
            status_show: 2
        });
    },
    hideModal: function() {
        this.setData({
            register_rule: !1
        });
    },
    calendarSign: function() {
        var t = this, e = t.data.today_time, a = t.data.today, r = t.data.currentDay, n = t.data.checkDay;
        if (n && parseInt(e) != parseInt(n)) myVue.getApp.core.showToast({
            title: "日期不对哦",
            image: "/static/images/icon-warning.png"
        }); else {
            var i = t.data.currentDayList;
            myVue.getApp.request({
                url: myVue.getApp.api.integral.register,
                data: {
                    today: a
                },
                success: function(e) {
                    if (0 == e.code) {
                        t.data.registerTime.push(a);
                        var n = e.data.continuation;
                        for (var o in i) i[o] && i[o].date == r && (i[o].is_re = 1);
                        t.setData({
                            register_rule: !0,
                            status_show: 1,
                            continuation: n,
                            status: 1,
                            currentDayList: i,
                            registerTime: t.data.registerTime
                        }), parseInt(n) >= parseInt(t.data.register.register_continuation) && t.setData({
                            jiangli: 1
                        });
                    } else t.getApp.core.showToast({
                        title: e.msg,
                        image: "/static/images/icon-warning.png"
                    });
                }
            });
        }
    }
		},
	}
</script>

<style scoped>

#modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--window-top);
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 1111;
    color: #fff;
}


.register_rule {
    width: 80%;
    overflow: hidden;
    background: #fff;
    z-index: 9999;
    position: fixed;
    left: 10%;
    top: calc(288upx +var(--window-top));
    border-radius: 8upx;
    padding-bottom: 96upx;
}

.rule {
    color: #353535;
    font-size: 16px;
    font-weight: bolder;
    margin: 56upx 0 44upx 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rule-detail {
    margin: 0 32upx;
    color: #353535;
    font-size: 13px;
}

.close {
    width: 30upx;
    height: 30upx;
    position: absolute;
    right: 32upx;
    top: 28upx;
}

.content {
    background: #fce7e2;
    padding-top: 48upx;
    padding-bottom: 58upx;
}

.register {
    background: #fff;
    margin: 0 24upx;
    border: 2upx solid #ebebeb;
    border-radius: 16upx;
}

.registre-img {
    width: 308upx;
    height: 308upx;
    margin: auto;
    margin-bottom: 16upx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendarSignDay {
    width: 308upx;
    height: 308upx;
    color: #fff;
    font-size: 15px;
    margin: auto;
    padding-top: 88upx;
}

.lianxu {
    width: 308upx;
    height: 50upx;
    text-align: center;
}

.tianshu {
    height: 100upx;
    width: 308upx;
    text-align: center;
}

.rntegral-font {
    color: #fff;
    margin-bottom: 16upx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-rule {
    position: absolute;
    height: 48upx;
    width: 96upx;
    background: #000000;
    border: 2upx solid #fff;
    color: #ffffff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24upx 0 0 24upx;
    opacity: 0.3;
    top: 48upx;
    right: 0;
}

.register_success {
    width: 94%;
    height: 800upx;
    overflow: hidden;
    z-index: 2222;
    position: fixed;
    left: 3%;
    top: calc(110upx + var(--window-top));
    border-radius: 8upx;
    padding-bottom: 96upx;
}

.register_success image {
    position: absolute;
    z-index: 3333;
}

.register_bac {
    width: 80%;
    height: 300upx;
    background: #fff;
    position: absolute;
    top: 336upx;
    left: 10%;
    z-index: 4444;
}

.register_font {
    z-index: 5555;
    color: #353535;
    font-size: 15px;
    display: flex;
    justify-content: center;
    margin-top: 30upx;
}

.zhidaolo {
    height: 64upx;
    width: 320upx;
    background: #ff4544;
    margin: 42upx auto;
    z-index: 9999;
    border-radius: 32upx;
}

.zhidaolo view {
    color: #fff;
    font-size: 15px;
    height: 64upx;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
